<template>
    <div class="content">
        <el-dialog :visible.sync="modifyArea.dialogFormVisible" title="经销区域" size="tiny" :before-close="handleClose" > 
            <div v-loading="loading">
                <div class="table">
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="provinceName" align="center" label="经销省">
                          <template scope = "scope">
                            {{scope.row.provinceName || '--'}}
                          </template>
                        </el-table-column>
                        <el-table-column prop="cityName" align="center" label="经销市">
                          <template scope = "scope">
                            {{scope.row.cityName || '--'}}
                          </template>
                        </el-table-column>
                        <el-table-column prop="areaName" align="center" label="经销区">
                          <template scope = "scope">
                            {{scope.row.areaName || '--'}}
                          </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="mr"></div>
                <footer>
                    <el-button @click="handleClose">关闭</el-button>
                </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { listAgentProvinces } from "api/settlemain";
export default {
  name: "btnmodifyArea",
  props: {
    modifyArea: {}
  },
  created() {
    this.seach()
  },
  data() {
    return {
      loading: false,
      form: {},
      tableData: []
    };
  },
  methods: {
    handleClose() {
      this.modifyArea.dialogFormVisible = false;
    },
    seach() {
      console.log(this.modifyArea.orgUserId)
      this.loading = true;
      listAgentProvinces(this.modifyArea.orgUserId).then(data => {
        this.loading = false;
        this.tableData = data.data.content;
      }).catch(error =>{
        this.loading = false;
      })
      // console.log("成功！");
      // this.$emit("sortInfor", value);
      // this.modifyArea.dialogFormVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
section,
footer {
  text-align: center;
}
.mr {
  margin-bottom: 30px;
}
.table {
  text-align: center;
}
.title {
  position: relative;
  margin-bottom: 30px;
  font-size: 14px;
  padding-left: 20px;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
  }
}
section {
  padding-bottom: 50px;
  el-button {
    margin-right: 20px;
  }
}
.cl-text {
  color: #000;
}
.dialogTable {
  text-align: center;
  display: inline-block;
  //   margin: 30px auto;
  th,
  td {
    padding: 0 20px;
    text-align: center;
    border: solid 1px #ececec;
    height: 40px;
  }
  .cl-right {
    border-right: solid 1px transparent;
  }
  //   tr td:nth-of-type(1) {
  //     width: 120px;
  //   }
  //   tr td:nth-of-type(2) {
  //     width: 100px;
  //   }
  //   tr td:nth-of-type(3) {
  //     width: 100px;
  //   }
  //   tr td:nth-of-type(4) {
  //     width: 210px;
  //   }
}
.cl-mony {
  color: #ff6600;
}
</style>
